@charset "UTF-8";
/*TabsNav主要样式*/

.tabs-nav {
    text-align: center;
    border: 1px solid $border-color;
    border-radius: $round;
    overflow: hidden;
    display: -webkit-box;
    display: box !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
}
.tabs-nav-li {
    padding: r(22) r(15);
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 1;
    font-size: r(30);
    border-right: 1px solid $border-color;
    color: $font-color-main;
    display: block;
    box-sizing: content-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:last-child {
        border: 0;
    }
    &.active {
        background: $border-color;
    }
}
//圆角
.tabs-nav-round{
    border-radius: r(100)
}

//主色
.tabs-nav-main,.tabs-nav-main .tabs-nav-li{
    border-color: $color-main;
    color: $color-main;
}
.tabs-nav-main .tabs-nav-li.active{
    @include bg-main;
}

//副色
.tabs-nav-second,.tabs-nav-second .tabs-nav-li{
    border-color: $color-second;
    color: $color-second;
}
.tabs-nav-second .tabs-nav-li.active{
    @include bg-second;
}

//红色
.tabs-nav-red,.tabs-nav-red .tabs-nav-li{
    border-color: $color-red;
    color: $color-red;
}
.tabs-nav-red .tabs-nav-li.active{
    @include bg-red;
}

//蓝色
.tabs-nav-blue,.tabs-nav-blue .tabs-nav-li{
    border-color: $color-blue;
    color: $color-blue;
}
.tabs-nav-blue .tabs-nav-li.active{
    @include bg-blue;
}

//绿色
.tabs-nav-green,.tabs-nav-green .tabs-nav-li{
    border-color: $color-green;
    color: $color-green;
}
.tabs-nav-green .tabs-nav-li.active{
    @include bg-green;
}

//橙色
.tabs-nav-orange,.tabs-nav-orange .tabs-nav-li{
    border-color: $color-orange;
    color: $color-orange;
}
.tabs-nav-orange .tabs-nav-li.active{
    @include bg-orange;
}